<template>
  <div class="login">
    <!-- 子组件 -->
    <router-view ref="Child"></router-view>
    <!-- 注册登陆切换 -->
    <div class="iPhone" v-if="isGo==='/register'">
      <a @click.prevent="goLogin">账号密码登录</a>
    </div>
    <div class="iCard" v-else>
      <a @click.prevent="goRegister">注册账号</a>
      <a @click.prevent="show = true" class="wangji" is-link>忘记密码?</a>
    </div>
    <van-popup position="bottom" v-model="show11"  get-container=".iphone">
      <div class="vchat">
        <p>
          <a href="#">微信登录</a>
        </p>
        <p>
          <a href="#">
            <img src="@/assets/wchar.jpg" />
          </a>
        </p>
      </div>
    </van-popup>

    <!-- 弹出层 -->
    <van-popup position="bottom" v-model="show">
      <div class="popup">
        <p>选择找回密码的方式</p>
        <p @click="changepwd">验证码找回</p>
        <p>实名认证找回</p>
        <p>以上我都没有</p>
        <p>取消</p>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data: () => ({
    comName: 'iPhone',
    show: false,
    isGo: ''
  }),
  // 强制页面刷新
  watch: {
    $route () {
      this.$router.go(0)
    }
  },
  created () {
    this.isGo = this.$route.path
    this.showpop()
  },
  methods: {
    changepwd () {
      // console.log('父组件', this.$refs.Child.username)
      if (this.$refs.Child.username === '') {
        this.$router.push('/changepassword/1')
      } else {
        this.$router.push('/changepassword/' + this.$refs.Child.username)
      }
    },
    goLogin () {
      this.$router.push('/login')
      this.isGo = this.$route.path
    },
    goRegister () {
      this.$router.push('/register')
      this.isGo = this.$route.path
    },
    showpop () {
      this.show11 = true
    }
  }
}
</script>
<style lang="less" scoped>
.login {
  padding: 0 10px;
  background: skyblue;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  height: 700px;
  z-index: 999;

  .iCard {
    display: flex;
    flex-direction: row;
    a {
      flex: 1;
    }
    .wangji {
      text-align: right;
      color: green;
    }
  }
  .vchat {
    width: 100%;
    // position: fixed;
    // bottom: 60px;
    left: 0;
    p {
      text-align: center;
      margin: 0;
      padding: 0;
      a {
        font-size: 14px;
        color: black;
        font-weight: bold;
      }
      img {
        width: 60px;
        // padding: 20px;
        border-radius: 50%;
        background-color: green;
      }
    }
  }
  .popup {
    text-align: center;
    p {
      margin: 0 10px;
      padding: 10px 0;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      &:first-of-type {
        font-size: 20px;
        font-weight: bolder;
      }
      &:last-of-type {
        margin: 0;
        border-top: 5px solid #ccc;
      }
    }
  }
}
</style>
